<template>
	<view class="ingame">
		<view class="header">
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar color="#fff" backgroundColor="transparent" title="排行榜" left-icon="left" @clickLeft="goback" />
			</view>
			<view class="header-content">
				<view class="top-one" v-if="topData.length > 0">
					<view class="user-name" style="color: #fff">{{ topData[0].nickName }}</view>
					<image
						:src="
							topData[0].avatar
								? `https://www.aikoolearn.com/video-dev${topData[0].avatar}`
								: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
						"
						style="width: 120rpx; height: 120rpx; border-radius: 50%"
						mode=""
					></image>

					<view class="topcost">{{ topData[0].cost / 1000 }}s</view>
				</view>
				<view class="top-two" v-if="topData.length > 1">
					<view class="user-name" style="color: #fff">{{ topData[1].nickName }}</view>
					<image
						:src="
							topData[1].avatar
								? `https://www.aikoolearn.com/video-dev${topData[1].avatar}`
								: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
						"
						mode=""
						style="width: 120rpx; height: 120rpx; border-radius: 50%"
					></image>
					<view class="twocost">{{ topData[1].cost / 1000 }}s</view>
				</view>
				<view class="top-three" v-if="topData.length > 2">
					<view class="user-name" style="color: #fff">{{ topData[2].nickName }}</view>
					<image
						:src="
							topData[2].avatar
								? `https://www.aikoolearn.com/video-dev${topData[2].avatar}`
								: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
						"
						mode=""
						style="width: 120rpx; height: 120rpx; border-radius: 50%"
					></image>
					<view class="threecost">{{ topData[2].cost / 1000 }}s</view>
				</view>
			</view>
		</view>
		<view class="content">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#05C7AC" @clickItem="onClickItem" />
			<!-- <view class="" style="font-size: 34rpx; font-weight: 600; padding: 40rpx 0 24rpx 26rpx">全部排名</view> -->
			<view class="popu-footer">
				<view class="userTop top-item">
					<view class="index" style="color: #ff7314">{{ userHistory.cnt == -1 ? '!' : userHistory.cnt }}</view>

					<view class="top-user">
						<image
							class="avatar"
							:src="
								userInfo.avatar
									? `https://www.aikoolearn.com/video-dev${userInfo.avatar}`
									: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
							"
							mode=""
							style="width: 64rpx; height: 64rpx"
						></image>
						<view class="nickName">
							{{ userInfo.nickName }}
						</view>
					</view>

					<view class=" " style="text-align: center">{{ userHistory.cnt == -1 ? '未通关' : userHistory.cost / 1000 + 's' }}</view>
				</view>
				<view class="footer-top">
					<view class="" style="width: 80rpx; text-align: center">排名</view>

					<view class="" style="width: 160rpx; text-align: center">用户ID</view>
					<!-- <view class="" style="width: 230rpx; text-align: center">学校</view> -->
					<view class="" style="text-align: center">用时时长</view>
				</view>

				<view class="user-topmain">
					<z-paging
						ref="paging"
						v-model="topData"
						@query="queryList"
						:default-page-size="20"
						:fixed="false"
						:height="userHistory ? 'calc(100vh - 1000rpx)' : 'calc(100vh - 860rpx)'"
						default-page-no="0"
					>
						<view class="top-item" v-for="(item, index) in topData" style="padding: 28rpx 30rpx">
							<view class="indexs" v-if="index == 0">
								<image
									src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/one.png"
									mode=""
									style="width: 48rpx; height: 48rpx"
								></image>
							</view>
							<view class="indexs" v-else-if="index == 1">
								<image
									src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/two.png"
									mode=""
									style="width: 48rpx; height: 48rpx"
								></image>
							</view>
							<view class="indexs" v-else-if="index == 2">
								<image
									src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/top/three.png"
									mode=""
									style="width: 48rpx; height: 48rpx"
								></image>
							</view>
							<view class="index" v-else>
								{{ index + 1 }}
							</view>

							<view class="top-user">
								<image
									class="avatar"
									:src="
										item.avatar
											? `https://www.aikoolearn.com/video-dev${item.avatar}`
											: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
									"
									mode=""
									style="width: 64rpx; height: 64rpx"
								></image>
								<view class="nickName">
									<view>{{ item.nickName }}</view>
									<view class="" style="font-size: 24rpx; color: #999999">
										{{ item.deptName }}
									</view>
								</view>
							</view>

							<view class=" " style="text-align: center">{{ item.cost / 1000 }}s</view>
						</view>
					</z-paging>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getLevel, getTop } from '@/services/level.js';
import { getHistory } from '@/services/login.js';
export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0,
			stageItem: {},
			topData: [],
			items: ['本校排名', '省内排名', '全部排名'],
			postData: {},
			userHistory: null,
			current: 0
		};
	},

	created() {
		// 在组件创建时获取 globalData
		try {
			this.globalData = wx.getStorageSync('globalData');
			this.calculateContentHeight();
		} catch (error) {
			// 处理获取存储失败的情况
			console.error('Failed to get globalData from storage:', error);
		}
	},
	computed: {
		userInfo() {
			return wx.getStorageSync('userInfo');
		}
	},
	onLoad(options) {
		this.stageItem = JSON.parse(options.item);
		this.$set(this.postData, 'deptId', this.userInfo.deptId);
		// this.getHistoryData({ libId: this.stageItem.libId, stage: this.stageItem.stage });
	},

	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			console.log(pageNo, pageSize, 'dsadsadadsad');
			this.getTopData({ libId: this.stageItem.libId, stage: this.stageItem.stage, ...this.postData }, pageNo, pageSize);
		},
		async getTopData(data, index, size) {
			console.log(data, 'data');
			const res = await getTop(data, index, size);
			console.log(res, 'res');
			if (res.code == 200) {
				this.userHistory = res.data.info;
				this.$refs.paging.completeByTotal(res.data.data, res.data.total);
			}
		},

		goback() {
			console.log(111);
			uni.navigateBack();
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
				// 请求接口
				switch (e.currentIndex) {
					case 0: //本校排名
						this.$set(this.postData, 'deptId', this.userInfo.deptId);
						this.$set(this.postData, 'province', null);
						this.$refs.paging.reload();

						break;
					case 1: //省内排名
						this.$set(this.postData, 'deptId', null);
						this.$set(this.postData, 'province', this.userInfo.province);
						this.$refs.paging.reload();
						break;
					case 2:
						this.$set(this.postData, 'deptId', null);
						this.$set(this.postData, 'province', null);
						this.$refs.paging.reload();

						break;
					default:
						break;
				}
			}
		},
		calculateContentHeight() {
			const statusBarHeight = this.globalData.statusBarHeight;
			const toBarHeight = this.globalData.toBar;
			const additionalHeight = 70; // 额外的 60px

			// 计算内容高度
			const contentHeight = `calc(100vh - (${statusBarHeight}px + ${toBarHeight}px + ${additionalHeight}px))`;

			this.contentHeight = contentHeight;
		}
	}
};
</script>

<style scoped lang="scss">
.ingame {
	position: relative;
	background-color: #f0f2f5;

	.header {
		width: 100%;
		height: 628rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url();
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			width: 100%;
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
	}

	.header-content {
		position: relative;
	}

	.user-name {
		color: #fff;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.top-one {
		position: absolute;
		top: 220rpx;
		transform: translate(-50%, 0);
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-two {
		position: absolute;
		top: 260rpx;
		transform: translate(-50%, 0);
		left: 24%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-three {
		position: absolute;
		top: 265rpx;
		transform: translate(-50%, 0);
		left: 76%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footer-top {
		padding: 10rpx 15rpx;
		margin-top: 20rpx;
		// width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 创建三列，每列等宽 */
		grid-gap: 10px; /* 列之间的间隔 */
		color: #999999;
		font-size: 28rpx;
	}
	.content {
		padding-top: 10rpx;
	}
	.userTop {
		width: 654rpx;
		height: 128rpx;
		background: #fdf6e1;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}
	.top-item {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 创建三列，每列等宽 */
		grid-gap: 10px; /* 列之间的间隔 */
		// padding: 28rpx 20rpx;
		.index {
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
		}
		.top-user {
			display: flex;
			align-items: center;
			color: #666666;
			justify-content: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 245rpx;
			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
			.nickName {
				width: 145rpx;
				margin-left: 10rpx;
				font-size: 28rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				// text-align: center;
			}
		}
	}

	.user-topmain {
		// overflow-y: scroll;
		// height: calc(100vh - 860rpx);
	}
	.topcost {
		width: 164rpx;
		height: 52rpx;
		background: #ff8e3f;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 40rpx;
		color: #903700;
	}
	.twocost {
		width: 164rpx;
		height: 52rpx;
		background: #fdc553;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 34rpx;
		margin-right: 50rpx;
		color: #903700;
	}
	.threecost {
		width: 164rpx;
		height: 52rpx;
		background: #03bd9d;
		margin-left: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		margin-top: 28rpx;
		color: #024940;
	}
	.indexs {
		width: 45rpx;
		height: 45rpx;
	}
	.popu-footer {
		width: 702rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin: 40rpx auto;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.green {
		background: linear-gradient(270deg, #05d19a 0%, #05c7ac 100%) !important;
		border-radius: 16rpx;
		color: #fff;
	}
	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
		.z-paging-content .z-paging-content-fixed .z-paging-reached-top {
			top: 405rpx !important;
		}
	}
}
</style>
